<template>
  <div class="workshop-buttons">
    <div class="switch-buttons">
      <button
        v-for="(workshop, index) in workshops"
        :key="index"
        class="switch-btn"
        :class="{ active: currentWorkshop === workshop.id }"
        @click="switchWorkshop(workshop.id)"
      >
        {{ workshop.name }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkshopButtons',
  props: {
    workshops: {
      type: Array,
      default: () => [
        { id: 1, name: '一期车间' },
        { id: 2, name: '二期车间' },
        { id: 3, name: '三期车间' }
      ]
    },
    currentWorkshop: {
      type: Number,
      default: 1
    }
  },
  methods: {
    switchWorkshop(workshopId) {
      this.$emit('switch-workshop', workshopId);
    }
  }
}
</script>

<style lang="scss" scoped>
.workshop-buttons {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  transform: rotate(0deg);

  .switch-buttons {
    display: flex;
    gap: 6px;

    .switch-btn {
      padding: 3px 10px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 4px;
      background: transparent;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      font-size: 12px;
      transition: all 0.3s ease;
      min-width: 60px;
      text-align: center;

      &:hover {
        border-color: #fff;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }

      &.active {
        background: rgba(255, 255, 255, 0.1);
        border-color: #fff;
        color: #fff;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.workshop-buttons {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;

  .switch-buttons {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;

    .switch-btn {
      padding: 8px 16px;
      border: none;
      background: transparent;
      color: #8f9bb3;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 14px;
      font-weight: 500;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }

      &.active {
        background: rgba(24, 144, 255, 0.8);
        color: #fff;
        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
      }
    }
  }
}
</style>
